

.pop-right {
    top: 60px !important;
    bottom: 0;
}




// 右上角box
.top-right-box {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 60;
    background: #fff;
    padding: 10px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 3px;
}

.importDark (@a)when (@a="dark") {
    .customBox {
        .select-tools{
            a{
                color:#fff;
            }
        }
        .tabList {
            li {
                background: @dark-blue;
                border-bottom: 2px solid darken(@dark-blue, 10%)
            }
        }

        .hline {
            border-left: 1px solid #333;
        }
    }

    .top-right-box {
        background: #333;
    }
}

// 区域统计
.areaCount {
    width: 100%;
    height: 100%;
    display: flex;

    .tableBox {
        padding: 10px;

    }

    .echartsBox {
        width: 100%;
        height: 100%;
    }
}
.customPoint {
    position: relative;

    .bgIcon {
        i {
            font-size: 30px;
            text-shadow: -0 -0 0.2em rgba(0, 0, 0, .8); // text-shadow:2px 2px 3px rgba(0,0,0,.5);
        }
    }

    .icon {
        position: absolute;
        top: -2px;
        left: 50%;
        margin: 0 0 0 -8px;

        i {
            font-size: 16px;
            color: #fff;
        }
    }
}
// 船气泡
.ship-info-box{
    z-index: 99;
    .ship-info{
        th{
            text-align:right;
            white-space:nowrap;
            background: #eee;
        }
    }
}
.floatTips {
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -90px;
    z-index: 1080;
    color: #fff;
    padding: 8px 12px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    background: rgba(0, 0, 0, .7);

    >a {
        color: #fff;
        margin: 0 6px;
        padding: 0px 3px;
    }
}
// 选择图层
.select-icon-box {
    @boxSize:90px;
    // border:1px solid #f00;
    padding: 12px 0;
    display: flex;
    flex-wrap: wrap;
    & > .select-item {
        // padding: 10px 10px;
        position: relative;
        width:@boxSize;
        height:@boxSize;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 5px;
        border: 2px solid #aaa;
        // background:#ccc ;
        margin:0 10px 10px 0;
        cursor: pointer;
        & p {
            text-align: center;
            &.icon {
                width: 100%;
                height:100%;
                display: flex;
                justify-content: center;
                // align-items: center;
                align-items:center;
                img {
                    width: 100%;
                    height: 100%;

                }
                & .zkuasgm-icon {
                    color: #333;
                    font-size: @boxSize/2;
                }
            }
            &.text{
                position: absolute;
                bottom:0;
                width:100%;
                left:0;
                background:rgba(0,0,0,.5);
                padding:2px 0;
                color:#fff;
            }
        }
        &.hover {
            border: 2px solid #ccc;
            border-radius: 10px;
            background: #fff;
            & p{
                &.text{
                    background:#1e9fff;
                }
            }
            &::after {
                content: "\e808";
                font-family: zkuasgm-icon;
                font-size: 16px;
                color: #1e9fff;
                position: absolute;
                width: 20px;
                height: 20px;
                background: rgba(255, 255, 255, 1);
                top: 5px;
                right: 5px;
                border: 1px solid #1e9fff;
                border-radius: 3px;
                display: flex;
                justify-items: center;
                align-items: center;
            }
            .add-sub-box{
                position: absolute;
                width: 82%;
                top:46%;
                right:0;
                display: flex;
                justify-content: flex-end;
                .layui-btn{
                    width:23px;
                    font-size:18px;
                    line-height:12px !important;
                }
                .layui-input{
                    padding:4px;
                    height: 22px;
                    line-height: 22px;
                    text-align: center;
                    background:#fff !important;
                    border:0 !important;
                    color:#333;
                }
                ul{
                    display:flex;
                    li{
                        padding:0 0px;
                    }
                }
            }
        }
    }
}
.type-icon-title{
    background:#ccc;
    border-left:4px solid #1e9fff;
    padding:5px 8px;
    color:#000;
}
.type-icon-box{
    display: flex;
    border-bottom:1px dashed #ccc;
    & > .title{
        display: flex;
        white-space:nowrap;
        justify-content: center;
        align-items: center;
        font-size:18px;
        font-weight: bold;
        padding:0 10px;
        width:100px;
    }
    & > .type-main{
        flex: 1;
    }
}